<template>
  <div class="prediction-container">
    <h1>购买金额预测</h1>
    <div class="form-group">
      <label>日期:</label>
      <input type="date" v-model="month" />
    </div>
    <button @click="getPrediction">获取预测结果</button>
    <div class="result" v-if="predictedPurchase !== null">
      预测购买金额：{{ predictedPurchase.toFixed(2) }}
    </div>
    <div class="error" v-if="errorMsg">
      错误：{{ errorMsg }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      month: '2025-08-01', // 默认日期
      predictedPurchase: null,
      errorMsg: ''
    }
  },
  methods: {
    async getPrediction() {
        console.log('当前选择的日期：', this.month); 
      try {
        // 发 POST 请求到后端，仅传递日期参数
        const response = await fetch('http://localhost:5000/predict', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          // 去掉 Is_Weekend 参数，只传月份
          body: `Month=${this.month}` 
        });

        const result = await response.json();
        if (result.success) {
          this.predictedPurchase = result.predictedPurchase;
          this.errorMsg = '';
        } else {
          this.errorMsg = result.error;
          this.predictedPurchase = null;
        }
      } catch (error) {
        this.errorMsg = `请求失败：${error.message}`;
        this.predictedPurchase = null;
      }
    }
  }
}
</script>

<style scoped>
.prediction-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}
.form-group {
  margin: 15px 0;
}
label {
  display: inline-block;
  width: 80px;
}
input {
  padding: 6px;
  width: 200px;
}
button {
  padding: 8px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.result {
  margin-top: 20px;
  color: green;
}
.error {
  margin-top: 20px;
  color: red;
}
</style>